<template>
	<view>
		<view class="xiangqing" v-if="userinfo" :style="{backGroundColor: isFullScreen ? 'unset' : '#fff'}">
			<!-- top -->
			<header>
				<view class="header-top flex justify-between">
					<view class="left flex align-center">
						<image :src="userinfo.images_list[0]" mode="" class="avat_img"></image>
						<view class="flex flex-column like_nums_box">
							<text>{{ userinfo.realname }}</text>
							<text>{{ userinfo.like_nums }}点赞</text>
						</view>
						<view class="btn-home" @click="guanzhu">
							<view class="bg flex align-center justify-center" v-if="userinfo.is_fowole == 0">关注</view>
							<view class="bg qx flex align-center justify-center" v-else>已关注</view>
						</view>
						<view class="margin-sm" @click="back()">
							<text class="wlIcon-fanhui1"></text>
							<text class="">返回</text>
						</view>
					</view>
					<view class="right flex align-center">
						<view class="flex r1">
							<image :src="item.avatar || '../../static/images/xiangqing/111.jpeg'" mode="" v-for="item in voteList.slice(0, 3)" class="vote_img"></image>
						</view>
						<view class="r2" v-if="voteList.length > 3">
							<text>{{ voteList.length }}</text>
						</view>
						<!-- <text class="wlIcon-31guanbi" style="font-size: 36rpx;"></text> -->
					</view>
				</view>
				<view class="header-bottom flex justify-between align-center">
					<view class="left flex">
						<view class="l1">
							<text>距上一名：</text>
							<text class="l1_t1">{{ userinfo.paent_vote }}票</text>
						</view>
						<view class="flex l2" @tap="toPhb">
							<image src="@/static/images/xiangqing/phb.png" class="img" mode=""></image>
							<text>排行榜</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex align-center" @tap="showModal('share')">
							<text class="wlIcon-fenxiangcopy"></text>
							<view class="margin-left-sm margin-right">分享</view>
						</view>
						<view class="right">
							<text>{{ userinfo.vote }}票</text>
						</view>
					</view>
				</view>
			</header>
			<!-- middle -->
			<center>
				<view class="swiper-box" :class="[isFullScreen ? 'is-full-screen' : '']">
					<swiper class="swiper" :current="currIndex" indicator-dots :autoplay="!autoplay" circular :duration="1000" @change="itemChange">
						<template v-if="videoStatusList && videoStatusList.length > 0">
							<swiper-item class="swiper-item" @click="BoFang(item)" v-for="(item, index) in videoStatusList" :key="item.id">
								<video :id="item.id" :ref="item.id" class="lb-image" :poster="userinfo.images_list[index]" :src="item.src"></video>
							</swiper-item>
						</template>

						<swiper-item v-for="(item, index) in userinfo.images_list" class="swiper-item" :key="index">
							<image class="lb-image" :id="'wrap' + index" :src="item" mode="aspectFit" />
						</swiper-item>
					</swiper>
		<!-- 			<text class="iconfont icon-quanping_o icon" v-if="!isFullScreen" @click="isFullScreen = !isFullScreen"></text>
					<text class="iconfont icon-quxiaoquanping_o icon" v-else @click="isFullScreen = !isFullScreen"></text> -->
					<view class="swper-seamless">
						  <vue-seamless-scroll
								ref="seamlessScroll"
						        class="scroll_box"
						        :data="pinglunList"
						        :class-option="defineScroll"
								:v-model="isStart"
						        style="
						          height: 100%;
						          overflow: hidden;
						          width: 100%;
						          color: white;
						          font-size: 18px;
						          text-align: center;
						        "
						      >
								<view class="list flex align-center" v-for="(item, index) in pinglunList">
									<view class="t1">{{ item.realname }}</view>
									<text class="t2">{{ item.desc }}</text>
								</view>
						   </vue-seamless-scroll>
					
					</view>
				</view>
				<view class="phb-box">
					<!-- <view class="phb-title flex align-center">选手描述:</view> -->
					<view class="phb-list">
						<view class="title-box">
							<view class="title">参赛宣言：</view>
							<view class="con">{{ userinfo.entry_declaration }}</view>
						</view>
						<view class="title-box">
							<view class="title">才艺优势：</view>
							<view class="con">{{ userinfo.talent }}</view>
						</view>
						<view class="title-box">
							<view class="title">身材信息：</view>
							<view class="con">
								<view class="">身高：{{ userinfo.height }}</view>
								<view class="">体重：{{ userinfo.weight }}</view>
								<view class="">三围：{{ userinfo.three_dimensions }}</view>
							</view>
						</view>
					</view>
				</view>
			</center>
			<!-- footer -->
			<footer class="footer">
<!-- 				<view class="top">

				</view> -->
				<view class="bottom flex justify-between align-center">
					<view class="flex align-center">
						<input class="search-input" placeholder-style="color: rgba(255, 255, 255, 0.35);" placeholder="说点什么..." type="text" v-model="plText" />
						<text @tap="fbpl" class="margin-lr-sm">发送</text>
					</view>

					<view class="right flex align-center justify-center">
						<view class="img1 flex flex-column align-center justify-center" @click="tp(0)">
							<image src="@/static/images/xiangqing/1.png" mode="" class="img" ></image>
							<text>投票</text>
						</view>
						<view class="flex flex-column align-center justify-center" @click="tp(1)">
							<image src="@/static/images/xiangqing/gift.png" mode="" class="img" ></image>
							<text>投票</text>
						</view>
					</view>
				</view>
			</footer>
			<view class="WANL-MODAL">
				<!-- 分享 -->
				<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop="">
						<wanl-share
							ref="wanlShare"
							page="pages/xiangqing/xiangqing"
							:image="userinfo.images_list[0]"
							:VImg="userinfo.poster"
							:scene="{ id: page_id, yqmId: user.id, qr: 'p' }"
							:scrollAnimation="scrollAnimation"
							:shareTitle="`我是第36届世界超级小姐大赛的${userinfo.code}号${userinfo.realname},请大家为我投一票.`"
							:shareText="pageData.params.navigationBarTitleText"
							@change="hideModal"
						/>
					</view>
				</view>
			</view>
			<uni-popup style="z-index: 999; height: auto" ref="popup" type="bottom" :mask-click="false" :is-mask-click="false">
				<view class="popup-content">
					<view class="close flex justify-between p-d-26" @click="close">
						<view class="nav">
							<text class="title" v-if="navIndex == 0">赠送礼物</text>
							<text  class="title" v-else>购物赠票</text>
						</view>
						<text>关闭</text>
					</view>
					<scroll-view style="height: 0; flex: 1;padding-bottom: 120rpx" scroll-y>
<!-- 						<view class="nav">
							<text :class="['t', navIndex == 0 ? 's' : '']" @click="setnavIndex(0)">赠送礼物</text>
							<text v-if="spShow" :class="['t', navIndex == 1 ? 's' : '']" @click="setnavIndex(1)">购物赠票</text>
						</view> -->
						<view class="search" v-if="navIndex == 1">
							<view class="bg flex align-center">
								<input class="search-input" placeholder-style="color: #BEBEBE;" placeholder="搜索商品" type="text" value="" />
								<text class="iconfont icon-sousuo"></text>
<!-- 								<view class="search-btn flex align-center justify-center">
									<text class="wlIcon-search"></text>
								</view> -->
							</view>
						</view>
						<view class="lw-box">
							<view class="lw-list">
								<view class="lw-items" v-for="(item, index) in lwList" :key="item.id" @click="zs(index)">
									<view :class="['lw-item', lwIndex == index ? 's' : '']">
										<view class="image-box">
											<image class="image" :src="navIndex == 0 ? item.image : item.goods_img"></image>
										</view>
										<view class="name" v-if="navIndex == 1">{{ item.name || '暂无名称' }}</view>
										<view class="jg">
											<view class="p" v-show="lwIndex != index">{{ navIndex == 0 ? item.ticket : item.price }}票</view>
											<view class="q">{{ navIndex == 0 ? item.price : item.goods_price }}元</view>
											<view class="qe" v-show="lwIndex == index">赠送{{ navIndex == 0 ? item.ticket : item.price }}票</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="xieyi-box flex justify-center align-center" v-if="navIndex == 0">
							<label class="radio flex justify-center align-center" @click="lwXy = !lwXy">
								<radio class="radios" :checked="lwXy" />
								<view class="">
									已阅读并同意
									<text class="x" @tap="onDetails('5', '赠送礼物协议')">《赠送礼物协议》</text>
								</view>
							</label>
						</view>
						<view class="num-box flex justify-between align-center">
							<view class="flex align-center">
								<view class="zs">数量:</view>
								<view :class="['jia', lwNum <= 1 ? 'disabled' : '']" @click="lwNum > 1 ? lwNum-- : ''">-</view>
								<input min="1" class="num" type="number" v-model="lwNum" />
								<view class="jian" @click="lwNum++">+</view>
							</view>
							<view class="btn-baoming flex justify-center align-center" @click="zs2">立即赠送</view>
						</view>
						
					</scroll-view>
				</view>
			</uni-popup>
			
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
 import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
	components: {
		VueSeamlessScroll
	},
	data() {
		return {
			autoplay: false,
			id: null,
			activity_id: null,
			userinfo: null,
			currIndex: 0,
			imgList: [''],
			navIndex: 0,
			pinglunList: [],
			plText: '',
			lwList: [],
			lwIndex: null,
			lwNum: 1,
			lwXy: true,
			page_id: null,
			isStart: true,
			// 页面参数
			pageData: {
				params: {
					navigationBarTitleText: '加载中..',
					share_title: '分享'
				},
				style: {}
			},
			modalName: '',
			scrollAnimation: 300,
			pagesNum: 0,
			spShow: false,
			isFullScreen: false,
			voteList: [],
			pinglunTimer: null,
			videoStatusList: []
		};
	},
	onReady() {
		// #ifndef MP-ALIPAY
		// this.videoContext = uni.createVideoContext('myVideo0');
		// #endif
	},
	computed: {
		...mapState(['common', 'user']),
		defineScroll() {
		  return {
		    step: 0.5, // 数值越大速度滚动越快
		    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
		    hoverStop: true, // 是否开启鼠标悬停stop
		    direction: 1, // 0向下 1向上 2向左 3向右
		    openWatch: true, // 开启数据实时监控刷新dom
		    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
		    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
		    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
		  };
		},
	},
	onLoad(e) {
		this.id = e.id;
		this.activity_id = e.activity_id
		this.pagesNum = getCurrentPages().length; // 1.1.9 升级
		// 判断是否小程序来源 1.1.9升级
		if (e.hasOwnProperty('scene')) {
			let scene = decodeURIComponent(e.scene);
			scene = this.$wanlshop.getParam(scene);
			this.page_id = scene.id;
		} else {
			this.page_id = e.id;
		}
		this.getUserInfo();
		this.getGiftLatest()
	},
	onShow() {
		this.pinglun();
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.pageData.style.navigationBarTextStyle,
				backgroundColor: this.pageData.style.navigationBarBackgroundColor
			});
		}, 200);
	},
	onHide() {
		clearInterval(this.pinglunTimer)
	},
	onUnload() {
		clearInterval(this.pinglunTimer)
	},
	methods: {
		itemChange(e) {
			if (e.detail.current != 0) {
				this.autoplay = false;
				this.videoStop()
			}
		},
		videoStop() {
			this.videoStatusList.forEach(item => {
				console.log(this.$refs, '(this.$refs)')
				this.$refs[item.id][0].pause()
			})
		},
		videoBofang(item) {
			// 须先暂停其他video
			this.videoStop()
			this.$refs[item.id][0].play()
		},
		BoFang(item) {
			if (this.autoplay == false) {
				this.autoplay = true;
				this.videoBofang(item);
			} else {
				this.autoplay = false;
				this.$refs[item.id][0].pause();
			}
		},
		dz(index) {
			uni.request({
				url: `/wanlshop/activity/Index/commonLike?common_id=${this.pinglunList[index]['id']}`,
				method: 'GET',
				success: (res) => {
					this.pinglun();
				}
			});
		},
		// 弹出层
		showModal(name) {
			console.log(this.pageData);

			// 滚动下分享
			setTimeout(() => {
				this.scrollAnimation = 0;
			}, 300);
			this.modalName = name;
		},
		hideModal() {
			// 强制关闭海报
			if (this.modalName == 'share') {
				this.$refs.wanlShare.closePoster();
			}
			this.modalName = null;
		},
		zs(index) {
			this.lwNum = 1
			if (index != this.lwIndex) {
				this.lwIndex = index;
				return;
			}
			if (!this.lwXy) {
				uni.showToast({
					icon: 'none',
					title: `请查看底部礼物协议并同意`
				});
				return;
			}
			if (this.lwIndex == null) {
				uni.showToast({
					icon: 'none',
					title: `请选择${this.navIndex == 0 ? '礼物' : '商品'}`
				});
				return;
			}
			// if (this.lwNum <= 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: `${this.navIndex == 0 ? '礼物' : '商品'}数量不能小于0`
			// 	});
			// 	return;
			// }
			this.navIndex == 0
				? uni.request({
						url: `/wanlshop/activity/Index/createGif?gift_id=${this.lwList[this.lwIndex]['id']}&number=${this.lwNum}&pay_type=wechat&user_player_id=${
							this.id
						}&method=mp`,
						method: 'GET',
						success: (res) => {
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&type=lw&data=${JSON.stringify(res.data.list)}`);
							// this.$jssdk.wxpay({
							// 	data: res.data,
							// 	success: (e) => {
							// 		console.log(e);
							// 		this.$wanlshop.msg('支付成功');
							// 	},
							// 	fail: (err) => {
							// 		if (err.errMsg == 'chooseWXPay:ok') {
							// 			this.$wanlshop.msg('支付成功');
							// 		} else if (err.errMsg == 'chooseWXPay:cancel') {
							// 			this.$wanlshop.msg('支付失败，取消支付');
							// 		} else if (err.errMsg == 'chooseWXPay:fail') {
							// 			this.$wanlshop.msg('支付失败');
							// 		}
							// 	}
							// });
						}
				  })
				: uni.request({
						url: `/wanlshop/activity/Index/createGoods?goods_id=${this.lwList[this.lwIndex]['wanlshop_goods_id']}&number=${this.lwNum}&user_player_id=${this.id}`,
						method: 'GET',
						success: (res) => {
							this.$store.commit('statistics/order', {
								pay: this.$store.state.statistics.order.pay + res.data.list.length,
								whole: this.$store.state.statistics.order.whole + res.data.list.length
							});
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(res.data.list)}`);
						}
				  });
		},
		zs2(index) {
			if (this.lwIndex == null) {
				return;
			}
			if (!this.lwXy) {
				uni.showToast({
					icon: 'none',
					title: `请查看底部礼物协议并同意`
				});
				return;
			}
			if (this.lwIndex == null) {
				uni.showToast({
					icon: 'none',
					title: `请选择${this.navIndex == 0 ? '礼物' : '商品'}`
				});
				return;
			}
			// if (this.lwNum <= 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: `${this.navIndex == 0 ? '礼物' : '商品'}数量不能小于0`
			// 	});
			// 	return;
			// }
			this.navIndex == 0
				? uni.request({
						url: `/wanlshop/activity/Index/createGif?gift_id=${this.lwList[this.lwIndex]['id']}&number=${this.lwNum}&pay_type=wechat&user_player_id=${
							this.id
						}&method=mp`,
						method: 'GET',
						success: (res) => {
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&type=lw&data=${JSON.stringify(res.data.list)}`);
							// this.$jssdk.wxpay({
							// 	data: res.data,
							// 	success: (e) => {
							// 		console.log(e);
							// 		this.$wanlshop.msg('支付成功');
							// 	},
							// 	fail: (err) => {
							// 		if (err.errMsg == 'chooseWXPay:ok') {
							// 			this.$wanlshop.msg('支付成功');
							// 		} else if (err.errMsg == 'chooseWXPay:cancel') {
							// 			this.$wanlshop.msg('支付失败，取消支付');
							// 		} else if (err.errMsg == 'chooseWXPay:fail') {
							// 			this.$wanlshop.msg('支付失败');
							// 		}
							// 	}
							// });
						}
				  })
				: uni.request({
						url: `/wanlshop/activity/Index/createGoods?goods_id=${this.lwList[this.lwIndex]['wanlshop_goods_id']}&number=${this.lwNum}&user_player_id=${this.id}`,
						method: 'GET',
						success: (res) => {
							this.$store.commit('statistics/order', {
								pay: this.$store.state.statistics.order.pay + res.data.list.length,
								whole: this.$store.state.statistics.order.whole + res.data.list.length
							});
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(res.data.list)}`);
						}
				  });
		},
		async tp(type) {
			let [err, r] = await uni.request({
				url: `/wanlshop/activity/Index/getActiviGoods`,
				method: 'POST',
				data: {
					player_id: this.id
				}
			});
			this.spShow = r.data.total > 0;
			uni.request({
				url: `/wanlshop/activity/Index/getActiviGif`,
				method: 'POST',
				success: (res) => {
					console.log(res.data);
					this.lwIndex = null;
					this.navIndex = type;
					this.setnavIndex(type)
					this.lwList = res.data.data;
					this.$refs.popup.open('bottom');
				}
			});
		},
		close() {
			this.getUserInfo();
			this.$refs.popup.close();
		},
		setnavIndex(index) {
			uni.request({
				url: `/wanlshop/activity/Index/${index == 0 ? 'getActiviGif' : 'getActiviGoods'}`,
				method: 'POST',
				data: {
					player_id: this.id
				},
				success: (res) => {
					this.lwIndex = null;
					this.lwList = res.data.data;
					this.navIndex = index;
				}
			});
		},
		getUserInfo() {
			uni.request({
				url: `/wanlshop/activity/Index/getplayerDetail?id=${this.id}`,
				method: 'GET',
				success: (res) => {
					res.data.images_list = res.data.images_list.map(item => item + '')
					console.log(res.data);
					this.userinfo = res.data;
					
					this.createVideo(res.data.videos_list)
				}
			});
		},
		createVideo(videoList) {
			// #ifndef MP-ALIPAY
				this.videoStatusList =  videoList.map((item, index) => {
					const id = 'myVideo' + index
					return {
						src: item,
						id,
					}
				})
			
			// #endif
		},
		guanzhu() {
			uni.request({
				url: `/wanlshop/activity/Index/addFollw?userplayer_uid=${this.userinfo.user_id}`,
				method: 'GET',
				success: (res) => {
					console.log(1111, res);
					this.userinfo.is_fowole = this.userinfo.is_fowole == 0 ? 1 : 0;
				}
			});
		},
		pinglun() {

			this.pinglunTimer = setInterval(() => {
				uni.request({
					url: `/wanlshop/activity/Index/paycomment?player_id=${this.id}`,
					method: 'GET',
					success: (res) => {
						console.log(1111, res);
						this.pinglunList = res.data.data;
						
					}
				});
			}, 3000)

		},
		fbpl() {
			let data = {
				player_id: this.userinfo.id,
				desc: this.plText
			};
			uni.request({
				url: `/wanlshop/activity/Index/addpaycomment`,
				data,
				method: 'POST',
				success: (res) => {
					console.log(1111, res);
					this.plText = '';
					this.pinglun();
				}
			});
		},
		getGiftLatest() {
			let data = {
				activity_id: this.activity_id,
				user_player_id: this.id
			};
			uni.request({
				url: `/wanlshop/activity/Index/getGiftLatest`,
				data,
				method: 'GET',
				success: (res) => {
					this.voteList = res.data
				}
			});
		},
		back() {
			uni.navigateBack()
		},
		toPhb() {
			uni.switchTab({
				url: '/pages/phb/phb'
			})
		}
	}
};
</script>

<style lang="scss" scoped>

.xiangqing {
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.3);
	// height: 100vh;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	padding-bottom: 200rpx;
	header {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 1;
	}
	.header-top {
		padding: 18rpx 20rpx;

		.left {
			.avat_img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.like_nums_box {
				margin-left: 8rpx;
				margin-right: 48rpx;
			}
			.btn-home {
				background: linear-gradient( 270deg, #FC78E5 0%, #EC5BFF 100%);
				border-radius: 200rpx;
				border-radius: 200rpx;
				padding: 10rpx 20rpx;
			}
		}
		.right {
			.r1 {
				margin-right: 8rpx;
			}
			.r2 {
				font-size: 26rpx;
				color: #FFFFFF;
				background: rgba(0,0,0,0.52);
				box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.3);
				padding: 12rpx 18rpx;
				border-radius: 30rpx;
				text-align: center;
			}
			.vote_img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.close {
				width: 24rpx;
				height: 24rpx;
				margin-left: 24rpx;
			}
		}
	}
	
	center {
		.swiper-box {
			width: 750rpx;
			height: 800rpx;
			position: relative;
			// position: fixed;
			// top: 15%;
			// left: 0;
			// right: 0;
			.swiper {
				height: 100%;
				// position: relative;
				// z-index: -1;
			}
			.swiper-item {
				overflow: hidden;
				width: 750rpx;
				height: 100%;
			}
		
			.lb-image {
				height: 100%;
				// width: 750rpx;
			}
			
			.icon {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 20px;
			}
			.swper-seamless {
				width: 100%;
				height: 50%;
				overflow-y: auto;
				padding-left: 36rpx;
				margin-top: 46rpx;
				position: absolute;
				bottom: 0;
				.list {
					height: 100%;
					// border-radius: 200rpx;
					font-size: 26rpx;
					color: #000;
					max-width: max-content;
					padding: 6rpx 14rpx;
					margin-top: 12rpx;
					.t1 {
						padding: 8rpx 12rpx;
						border-radius: 200rpx;
						background: rgba(0,0,0,0.1);
						color:  #EC5BFF;
						margin-right: 8rpx;
					}
				}
			}
			
		}
	}
	
	.header-bottom {
		padding-left: 26rpx;
		margin: 26rpx 0;
		.img {
			width: 30rpx;
			height: 30rpx;
		}
		
		.left  {
			.l1_t1 {
				color: #FA9801;
				font-size: 26rpx;
			}
			.l2 {
				margin-left: 36rpx;
				.img {
					margin-right: 10rpx;
				}
			}
		}
		.right {
			background: linear-gradient( 270deg, #FF469A 0%, rgba(236,91,255,0.7863) 74%, rgba(236,91,255,0.27) 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
			border-radius: 200rpx 0px 0px 200rpx;
			padding: 10rpx 16rpx;
		}
	}
	
	.footer {
		.top {
			height: 288rpx;
			overflow-y: auto;
			padding-left: 36rpx;
			margin-top: 46rpx;
			.list {
				height: 100%;
				// border-radius: 200rpx;
				font-size: 26rpx;
				color: #000;
				max-width: max-content;
				padding: 6rpx 14rpx;
				margin-top: 12rpx;
				.t1 {
					padding: 8rpx 12rpx;
					border-radius: 200rpx;
					background: rgba(0,0,0,0.1);
					color:  #EC5BFF;
					margin-right: 8rpx;
				}
			}
		}
		.img {
			width: 90rpx;
			height: 90rpx;
		}
		
		.bottom {
			background: #fff;
			padding: 0 40rpx 0 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			.img1 {
				margin-right: 32rpx;
			}
			.search-input {
				background:  #EC5BFF;
				border-radius: 200rpx;
				height: 64rpx;
				padding-left: 40rpx;
				color: #fff;
			}
		}
	}

}

.swiper-box.is-full-screen {
	top: 0;
	bottom: 0;
	height: 100%;
}
.flex-column {
	flex-direction: column;
}

.popup-content {
	background-color: #fff;
	height: calc(100vh - 600rpx);
	display: flex;
	flex-direction: column;
	border-radius: 20rpx 20rpx 0 0;
	border-top: 1px solid #fff;
	font-size: 30rpx;
	color: #261332;
	.p-d-26 {
		padding: 26rpx;
	}
	.close {
		// text-align: right;
		font-size: 28rpx;
		color: #3D3D3D;
		padding: 26rpx;
		.nav {
			font-size: 30rpx;
			color: #261332;
		}
	}
	.nav {
		font-size: 34rpx;
		font-weight: 900;
		letter-spacing: 1.7rpx;
		line-height: 47.6rpx;
		color: rgba(142, 116, 158, 1);
		.t {
			margin-right: 20rpx;
		}
		.s {
			color: rgba(223, 39, 233, 1);
		}
	}
	.search {
		margin: 34rpx auto;
		width: 700rpx;
		height: 88rpx;
		border-radius: 10rpx;
		padding: 4rpx;
		background: #F3F3F3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding-left: 72rpx;
		.bg {
			position: relative;
			border-radius: 10rpx;
			background-color: $bg1;
			width: 100%;
			height: 100%;
		}
		.search-input {
			background-color: #F3F3F3;
			flex: 1;
			height: 100%;
			padding: 20rpx;
			padding-right: 88rpx;
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 1.4rpx;
			line-height: 39.2rpx;
			color: #BEBEBE;
		}
		.icon-sousuo {
			position: absolute;
			left: -12px;
			color: #BEBEBE;
		}
		.search-btn {
			position: absolute;
			right: -4rpx;
			color: #fff;
			font-size: 40rpx;
			border-radius: 0 10rpx 10rpx 0;
			width: 74rpx;
			height: 88rpx;
			background: linear-gradient(270deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
		}
	}
	.lw-box {
		margin: 50rpx 0;
		.lw-list {
			display: flex;
			flex-wrap: wrap;
		}
		.lw-items {
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.lw-item {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			width: 216rpx;
			border-radius: 20rpx;
			border: 1px solid #EDEDED;
			&.s {
				border: 2rpx solid #E7DAE9;
				background: #FEF4FF;
				.image {
					transform: scale(1.05);
				}
				.jg {
					background: #FEF4FF;
					.p {
						font-size: 0.8em;
					}
					.q {
						color: #3D3D3D;
						padding: 5rpx 0;
					}
					.qe {
						color: #fff;
						width: 100%;
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #EC5BFF;;
						border-radius: 0 0 20rpx 20rpx;
					}
				}
				.name {
					// background: #a829f8;
				}
			}
			.image-box {
				width: 216rpx;
				height: 190rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.image {
					transition: all 0.5s ease-in;
					width: 150rpx;
					height: 160rpx;
				}
			}
			.name {
				// background: #000000;
				font-size: 24rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 33.6rpx;
				color: #3D3D3D;
				padding: 10rpx 0;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
			.jg {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 96rpx;
				opacity: 1;
				background: #FFFFFF;;
				.p {
					font-size: 30rpx;
					font-weight: 900;
					letter-spacing: 1.5rpx;
					line-height: 42rpx;
					color: #3D3D3D;
				}
				.q {
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 1.2rpx;
					line-height: 33.6rpx;
					color: rgba(202, 173, 221, 1);
				}
			}
		}
	}
	.num-box {
		box-shadow: 0px 1px 3px 1px rgba(236,145,252,0.38);
		border-radius: 20rpx;
		padding: 26rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.zs {
			font-size: 30rpx;
			color: #2C2E3B!important;
			margin-right: 22rpx;
		}
		.jia,
		.jian {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 38rpx;
			height: 52rpx;
			color: #B7A1BA;
			background: #FFF1FC;
			border-radius: 20rpx;
		}
		.disabled {
			background: lightgrey;
		}

		.num {
			text-align: center;
			color: #fff;
			margin: 0 10rpx;
			font-size: 32rpx;
			color: #2C2E3B;
			width: 60rpx;
			height: 52rpx;
			border-radius: 10rpx;
		}
	}
	.xieyi-box {
		height: 120rpx !important;
		font-size: 26rpx;
		font-weight: 500;
		letter-spacing: 1.3rpx;
		color: rgba(255, 255, 255, 1);
		.radios {
			transform: scale(0.7);
		}
		.x {
			/** 文本2 */
			font-size: 26rpx;
			font-weight: 500;
			letter-spacing: 1.3rpx;
			color: rgba(110, 63, 250, 1);
		}
	}

	.btn-baoming {
		padding: 20rpx 66rpx;
		background: linear-gradient( 90deg, #EC5BFF 0%, #FC79E6 100%);
		box-shadow: inset 0px 4px 5px 3px rgba(255,252,252,0.3);
		border-radius: 200rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
}

	
.phb-box {
	color: #000;
	margin: 0 auto;
	text-align: left;
	margin-bottom: 50rpx;
	opacity: 1;
	border-radius: 10rpx;
	padding: 4rpx;
	.phb-title {
		padding-left: 30rpx;
		height: 74rpx;
		font-size: 26rpx;
		font-weight: 500;
		letter-spacing: 1.3rpx;
	}
	.phb-list {
		font-size: 26rpx;
		font-weight: 900;
		letter-spacing: 1.3rpx;
		line-height: 36.4rpx;
		padding: 30rpx;
		.title-box {
			margin-bottom: 50rpx;
			.title {
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 1.4rpx;
				line-height: 39.2rpx;
				&::after {
					content: ' ';
					display: block;
					width: 112rpx;
					height: 4rpx;
					opacity: 1;
				}
			}
			.con {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 1.4rpx;
				line-height: 39.2rpx;
			}
		}
	}
}
</style>
